<template>
  <div class="tabbar">
      <ul>
          <router-link to="/home" custom v-slot="{ navigate, isActive }">
            <li @click="navigate" :class="isActive? 'active':''">
                <i class="iconfont">&#xe607;</i>
                <span>首页</span>
            </li>
          </router-link>
          <router-link to="/cart" custom v-slot="{ navigate, isActive }">
            <li @click="navigate" :class="isActive? 'active':''">
                <i class="iconfont">&#xe672;</i>
                <span>订单</span>
            </li>
          </router-link>
          <router-link to="/mine" custom v-slot="{ navigate, isActive }">
            <li @click="navigate" :class="isActive? 'active':''">
                <i class="iconfont">&#xe600;</i>
                <span>我的</span>
            </li>
          </router-link>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'tabbar',
}
</script>

<style lang='less'>
@font-face {
  font-family: 'iconfont';  /* Project id 2963645 */
  src: url('//at.alicdn.com/t/font_2963645_t1itkwuomq.woff2?t=1637894979452') format('woff2'),
       url('//at.alicdn.com/t/font_2963645_t1itkwuomq.woff?t=1637894979452') format('woff'),
       url('//at.alicdn.com/t/font_2963645_t1itkwuomq.ttf?t=1637894979452') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.tabbar ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 90px;
    border-top: 1px solid #ccc;
    background: #FAFAFA;
    li{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        i{
            font-size: 26px;
        }
        span{
            font-size: 10px;
        }
    }
}
.active {
    color: #F9BD00;
}
</style>
